// 工具
var Tools ={
    getRandom : function(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
      },
    getColor : function(){
        var r = this.getRandom(0,255);
        var g = this.getRandom(0,255);
        var b = this.getRandom(0,255);
        return "rgb("+r+","+g+","+b+")";
      }
};
// =====food========
(function() {
    var ps = "absolute";
    function Food(option){
        option = option instanceof Object ? option :{};
        this.width = option.width || 20;
        this.height = option.height || 20;
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.color = option.color || "green";
        this.elements = [];
    };
    Food.prototype.render = function(map){
        var ele = document.createElement("div");
        this.x = Tools.getRandom(0,(map.clientWidth / this.width) - 1) * this.width;
        this.y = Tools.getRandom(0,(map.clientHeight / this.height) - 1) * this.height;
        ele.style.width = this.width + "px";
        ele.style.height = this.height + "px";
        ele.style.left = this.x + "px";
        ele.style.top = this.y + "px";
        ele.style.position = ps;
        ele.style.backgroundColor = this.color;
        map.appendChild(ele);
        this.elements.push(ele);
    };
    // 删除
    Food.prototype.remove = function(map,i){
        map.removeChild(this.elements[i]);
        this.elements.splice(i,1);
    };
    window.Food = Food;
})();
// =======snake======
(function(){
    var ps = "absolute";
    function Snake(option) {
        option = option instanceof Object ? option :{};
        this.width = option.width || 20;
        this.height = option.height || 20;
        this.body = [
            {x:3,y:2,color:"red"},
            {x:2,y:2,color:"blue"},
            {x:1,y:2,color:"blue"},
        ];
        this.direction = "right";
        this.elements = [];
    };
    Snake.prototype.render = function(){
        for (i = 0;i < this.body.length ;i++){
            let piece = this.body[i];
            let ele = document.createElement('div');
            ele.style.width = this.width + "px";
            ele.style.height = this.height + "px";
            ele.style.left =(piece.x * this.width) + "px";
            ele.style.top = (piece.y * this.height) + "px";
            ele.style.position = ps;
            ele.style.backgroundColor = piece.color;
            map.appendChild(ele);
            this.elements.push(ele);
        };
    };
    Snake.prototype.move =function(){
        var head = this.body[0];
        for(var i = this.body.length-1;i>0;i--){
            this.body[i].x = this.body[i-1].x;
            this.body[i].y = this.body[i-1].y;
        }
        switch(this.direction){
            case "right":
                head.x += 1;
                break;
            case "left":
                head.x -= 1;
                break;
            case "top":
                head.y -= 1;
                break;
            case "bottom":
                head.y += 1;
                break;
        };
    };
    // 删除上一次渲染的蛇的元素
    Snake.prototype.remove = function(map){
        for(var i = this.elements.length-1;i>=0 ;i--){
            map.removeChild(this.elements[i])
        }
        this.elements = [];
    }
    window.Snake = Snake;
})();
// ==========game=======
(function(){
    var that;
    function Game(option) {
        this.food = new Food();
        this.snake = new Snake();
        this.map = map;
        that = this;
    }
    Game.prototype.start = function () {
        this.food.render(this.map);
        this.food.render(this.map);
        this.food.render(this.map);
        this.snake.render(this.map);
        runSnake();
        bindkey();
    };
    function bindkey() {
        document.onkeydown = function (e) {
            switch (e.keyCode) {
                case 37:
                    that.snake.direction = "left";
                    break;
                case 38:
                    that.snake.direction = "top";
                    break;
                case 39:
                    that.snake.direction = "right";
                    break;
                case 40:
                    that.snake.direction = "bottom";
                    break;
            }
        }
    }
    function runSnake() {
        var timer = setInterval(function () {
            that.snake.move();
            that.snake.remove(that.map);
            that.snake.render(that.map);
            var maxX = (that.map.offsetWidth / that.snake.width);
            var maxY = (that.map.offsetHeight / that.snake.height);
            var headX = that.snake.body[0].x;
            var headY = that.snake.body[0].y;
            var hY = headY * that.snake.height;
            var hX = headX * that.snake.width;
            for(var i =0;i < that.food.elements.length ;i++){
                if(that.food.elements[i].offsetLeft === hX && that.food.elements[i].offsetTop  === hY){
                    that.food.remove(that.map,i);
                    that.food.render(that.map);
                    var last = that.snake.body[that.snake.body.length - 1];
                    that.snake.body.push({
                        x: last.x,
                        y: last.y,
                        color: last.color
                    })
                }
            }
            if (headX < 0 || headX >= maxX || headY < 0 || headY >= maxY) {
                clearInterval(timer);
                alert("game over");
            }
        }, 150);
    }
    window.Game = Game;
})();
// ===================main=======================
(function(){
    var map = document.getElementById("map");
    var game = new Game(map);
    game.start();
})();